<template>
  <div class="personal">
    <h1>i m personal</h1>
    <img src="../../assets/images/logo.png" alt="">
    <!--使用vuex引入的方式一-->
    <h2>vuex引入方式一</h2>
    <p>{{$store.state.user}}</p>
    <p>{{$store.state.nickname}}</p>
    <!--方式二-->
    <h2>vuex引入方式二，请查看代码</h2>
    <!--<p>{{user2}}</p>-->
    <!--<p>{{nickname2}}</p>-->
    <!--方式三-->
    <h2>vuex引入方式三</h2>
    <p>{{user3}}</p>
    <p>{{nickname3}}</p>
    <h2>vuex引入方式四及方式五也使用了计算属性，详细请看代码</h2>
    <div>
      <mt-button type="primary" @click="changeUserName">change</mt-button>
    </div>
    <Foot :index="3"></Foot>
  </div>
</template>

<script>
import Foot from '../../components/footer/footer'
import { mapState } from 'vuex'
export default {
  components: {Foot},
  data () {
    return {

    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    changeUserName () {
      this.$store.commit('changeUser', {user: 'zedMing', nickname: '无形之刃，最为致命'})
    }
  },
  // 方式二
  // computed: {
  //   user2 () {
  //     return this.$store.state.user
  //   },
  //   nickname2 () {
  //     return this.$store.state.nickname
  //   }
  // }
  // 方式三使用mapState辅助函数
  computed: mapState({
    user3: state => state.user,
    nickname3: state => state.nickname
  })
  // 方式四使用mapState辅助函数传字符串数组
  // computed: mapState([
  //   "user",
  //   "nickname"
  // ]),
  // 方式五使用扩展运算符
  // computed: {
  //   ...mapState ([
  //     "user",
  //     "nickname"
  //   ])
  // },
}
</script>

<style lang="scss" scoped>

</style>
